<template>
	<view class="content">
		<u-navbar title="流水记录"  :autoBack="true">
		</u-navbar>
		<view class="nav">
			<view class="s1" :class='{active: type == 0}' @click='setType(0)'>本周</view>
			<view class="s1" :class='{active: type == 1}' @click='setType(1)'>本月</view>
			<view class="s1" :class='{active: type == 2}' @click='setType(2)'>上月</view>
			<view class="s1" :class='{active: type == 3}' @click='setType(3)'>近半年</view>
			<view class="s1" :class='{active: type == 4}' @click='setType(4)'>近一年</view>
			<view class="s1" :class='{active: type == 5}' @click='setType(5)'>自定义</view>
		</view>

		<view class="container">
			<view class="screen">
				<view class="title">宝石类型</view>
				<view class="c2" style="position: relative;">
					<u--input readonly v-model="stonename" placeholder="请选择" :customStyle="{padding: '0 32rpx'}"
						suffixIcon="arrow-down" suffixIconStyle="color: #909399"></u--input>
					<view @click="show=true" style="position: absolute;width: 100%; 
						height: 100%;background-color: transparent;top: 0;left: 0;"></view>
				</view>
				<template v-if="type==5">
					<view class="title">开始时间</view>
					<view class="c2" style="position: relative;">
						<u--input v-model="paramsData.from_time" readonly placeholder="请选择"
							:customStyle="{padding: '0 32rpx'}" suffixIcon="arrow-down"
							suffixIconStyle="color: #909399"></u--input>
						<view @click="showTimes(0)" style="position: absolute;width: 100%;
								height: 100%;background-color: transparent;top: 0;left: 0;"></view>
					</view>
					<view class="title">结束时间</view>
					<view class="c2" style="position: relative;">
						<u--input v-model="paramsData.to_time" readonly placeholder="请选择"
							:customStyle="{padding: '0 32rpx'}" suffixIcon="arrow-down"
							suffixIconStyle="color: #909399"></u--input>
						<view @click="showTimes(1)" style="position: absolute;width: 100%;
								height: 100%;background-color: transparent;top: 0;left: 0;"></view>
					</view>
				</template>
			</view>
			<view class="water">
				<view class="water_list" v-for="v,i in waterList" :key="i">
					<view class="time">{{$u.timeFormat(v.createtime*1000, 'yyyy/mm/dd hh:MM')}}</view>
					<view class="account">
						<view>{{v.type==1?'转账':'消费'}}</view>
						<view>{{v.stone_type|fnName}} {{v.from_id==parent_id?'-':'+'}} {{v.amount}}</view>
					</view>
					<template v-if="v.type==1">
						<view class="account_info">
							<view>转账人：</view>
							<view>{{ v.from.realname }} ({{ v.from.partner_account || '-' }})</view>
						</view>
						<view class="account_info">
							<view>到账人：</view>
							<view v-if="'normal' == v.to.role">{{ v.to.realname }}</view>
							<view v-else>{{ v.to.realname }} ({{ v.to.account || '-' }})</view>
						</view>
					</template>
					<view class="account_info" v-else>
						<view>消费人：</view>
						<view>{{ v.from.realname }} ({{ v.from.partner_account || '-' }})</view>
					</view>
					<view class="account_info" v-if="v.type==1">
						<view>附言：</view>
						<view>{{v.notice}}</view>
					</view>
					<view class="account_info" v-else>
						<view>消费内容：</view>
						<view>{{v.consumeinfo}}</view>
					</view>

				</view>
				<view class="empty" v-if="!waterList.length">
					<u-empty mode="list" text="暂无数据"></u-empty>
				</view>
				<u-loadmore line v-if="waterList.length&&waterList.length==total" status="nomore" nomore-text="没有更多了" />
			</view>
		</view>

		<u-picker keyName="label" @confirm="choose" :show="show" @cancel="show=false" :columns="columns"></u-picker>
		<u-datetime-picker @cancel="showTime=false" :minDate="minTime" :maxDate="Date.now()" :show="showTime"
			v-model="value1" mode="date" @confirm="chooseTime"></u-datetime-picker>
	</view>
</template>

<script>
	function getTimeRange(type) {
		let now = new Date();
		let year = now.getFullYear();
		let month = now.getMonth() + 1; // 注意：月份是从 0 开始的，所以要加 1
		let day = now.getDate();
		let start, end;

		switch (type) {
			case 0: // 本周的开始和结束时间
				let weekDay = now.getDay(); // 获取今天是星期几
				let diffToMonday = (weekDay === 0) ? 6 : (weekDay - 1); // 获取距离本周一的天数差
				let monday = new Date(year, month - 1, day - diffToMonday); // 本周一的日期对象
				let sunday = new Date(year, month - 1, day + (7 - diffToMonday)); // 本周日的日期对象
				start = formatDate(monday);
				end = formatDate(sunday);
				break;

			case 1: // 本月的开始和结束时间
				start = formatDate(new Date(year, month - 1, 1));
				end = formatDate(new Date(year, month, 0));
				break;

			case 2: // 上个月的开始和结束时间
				start = formatDate(new Date(year, month - 2, 1));
				end = formatDate(new Date(year, month - 1, 0));
				break;

			case 3: // 最近半年的开始和结束时间
				start = formatDate(new Date(year, month - 7, 1));
				end = formatDate(new Date(year, month, 0));
				break;

			case 4: // 最近一年的开始和结束时间
				start = formatDate(new Date(year - 1, month - 1, 1));
				end = formatDate(new Date(year, month, 0));
				break;

			default:
				start = end = "Invalid type";
				break;
		}

		return {
			from_time: start,
			to_time: end
		};
	}

	function formatDate(date) {
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		return year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
	}
	import {
		stoneLog_api
	} from '@/api/second.js'
	export default {
		data() {
			return {
				show: false,
				showTime: false,
				minTime: new Date(2000, 0, 1).getTime(),
				value1: Number(new Date()),
				columns: [
					[{
						label: '绿石头',
						id: 1
						// ...
					}, {
						label: '蓝石头',
						id: 2
						// ...
					}, {
						label: '红石头',
						id: 3
						// ...
					}]
				],
				keyword: '',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				type: 0,
				list: [],
				page: 1,
				stop_loading: false,
				take_show: false,
				take_info_show: false,
				take_row_index: 0,
				row: {},
				info: {},
				Delivery: {},
				waterList: [],
				paramsData: {
					page: 1,
					stone_type: '',
					from_time: '',
					to_time: ''
				},
				stonename: '',
				parent_id: '',
				timeType: '',
			};
		},
		filters: {
			fnName(value) {
				const data = {
					1: '绿石头',
					2: '蓝石头',
					3: '红石头',
				}
				return data[value]
			}
		},
		onLoad({
			parent_id
		}) {
			this.parent_id = parent_id
			this.getWaterlist(1, 0);
		},
		onReachBottom() {
			if (!this.waterList.length) return
			if (this.waterList.length < this.total) {
				this.paramsData.page += 1
				this.getWaterlist(0,this.type,this.type==5?1:0)
			}
		},
		methods: {
			getWaterlist(type, time, status = 0) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				stoneLog_api({
					...this.paramsData,
					...((time == 5 && status) ? {} : getTimeRange(time))
				}).then(res => {
					if (type) {
						this.waterList = res.data.data
					} else {
						this.waterList.push(...res.data.data)
					}
					this.total = res.data.total
				}).catch(err => {
					this.waterList = []
				}).finally(() => {
					uni.hideLoading()
				})
			},



			setType(type) {
				this.type = type
				this.paramsData = this.$options.data().paramsData
				this.stonename = ''
				if (type == 5) return this.waterList = []
				this.getWaterlist(1, type);
			},
			onClose() {
				this.take_show = false;
			},
			choose(e) {
				this.stonename = e.value[0].label
				this.paramsData.stone_type = e.value[0].id
				this.show = false
				this.paramsData.page = 1
				this.getWaterlist(1, this.type,this.type==5?1:0)
			},
			chooseTime(e) {
				if (this.timeType) {
					this.paramsData.to_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				} else {

					this.paramsData.from_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				}
				this.showTime = false
				this.paramsData.page = 1
				if (this.paramsData.to_time && this.paramsData.from_time) {
					if (+new Date(this.paramsData.to_time) < +new Date(this.paramsData.from_time)) return this.$u.toast(
						'结束时间应大于开始时间')
				}
				this.getWaterlist(1, this.type, 1)
			},
			showTimes(type) {
				this.timeType = type
				this.showTime = true
			},

		}
	}
</script>

<style lang="scss">
	/deep/.u-search__content {
		border-radius: 28rpx !important;
	}

	.content {
		min-height: 100vh;
		margin: 0 40rpx;

		.search {
			margin: 40rpx 0;
		}
	}

	::v-deep .u-list {
		height: auto !important;
	}

	.nav {
		@include flex;
		justify-content: space-between;
		height: 84rpx;
		border-radius: 48rpx;
		background-color: #E6EDF5;
		padding: 6rpx 8rpx;
		margin-top: 52rpx;

		.s1 {
			width: 164rpx;
			height: 84rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #0A1629;
			line-height: 84rpx;
			text-align: center;

			&.active {
				background-color: #7677EB;
				color: #FFFFFF;
			}
		}
	}

	.container {

		.screen {
			padding: 0 40rpx 40rpx 40rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			margin: 52rpx 0;

			.c2 {
				margin-top: 40rpx;
				position: relative;

				/deep/ .u-input {
					height: 98rpx;
					border-radius: 28rpx;
				}

				.on_in {
					position: absolute;
					inset: 0;
				}
			}

			.title {
				padding-top: 52rpx;
				font-size: 28rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #7D8592;
			}
		}

		.water {
			padding: 40rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			display: flex;
			flex-direction: column;
			margin-bottom: 52rpx;

			.more {
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #9E9E9E;
			}

			.title {
				font-size: 40rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #0A1629;
				padding-bottom: 40rpx;
			}

			.water_list {
				padding: 40rpx;
				background: #F4F9FD;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				opacity: 1;
				margin-bottom: 40rpx;

				.time {
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #91929E;
				}

				.account {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #000000;
					padding: 32rpx 0 10rpx;
				}

				.account_info {
					display: flex;
					align-items: center;
					padding: 23rpx 0;

					&:last-child {
						padding-bottom: 0;
					}

					>view:first-child {
						width: 142rpx;
						font-size: 28rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						color: #91929E;
						text-align: right;
					}

					>view:last-child {
						flex: 1;
						font-size: 30rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						color: #688AB5;
					}
				}
			}
		}

	}

	.list {
		@include flex(column);
		padding-bottom: 36rpx;

		.item {
			height: 418rpx;
			background-color: #FFF;
			border: 2rpx solid #7677EB;
			padding: 24rpx 22rpx;
			border-radius: 48rpx;
			margin-top: 26rpx;

			.s1 {
				height: 360rpx;
				position: relative;

				image {
					width: 100%;
					height: 360rpx;
					position: absolute;
					border-radius: 24rpx;
				}

				text {
					position: absolute;
					bottom: 0;
					width: 88%;
					padding: 20rpx 6% 0;
					height: 60rpx;
					border-radius: 0 0 24rpx 24rpx;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #31353D 100%);
					font-size: 32rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 600;
					color: #FFFFFF;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.s2 {
				width: 628rpx;
				height: 32rpx;
				margin-top: 24rpx;
				line-height: 32rpx;
				@include flex;
				justify-content: space-between;
				position: relative;
				font-size: 24rpx;

				.c1 {
					@include flex;

					.e1 {
						margin-right: 34rpx;
						color: #9E9E9E;
					}

					.e2 {
						color: #7677EB;
					}
				}

				.c2 {
					color: #9E9E9E;

					.e2 {
						color: #7677EB;
					}
				}
			}
		}
	}

	// .empty {
	// 	position: absolute;
	// 	top: 50%;
	// 	left: 50%;
	// 	transform: translate(-50%, -50%);
	// }

	.take_over {
		width: 566rpx;
		padding: 0 52rpx 52rpx 52rpx;
		background-color: #fff;
		border-radius: 48rpx;

		.s1 {
			width: 100%;
			height: 34rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #7677EB;
			line-height: 34rpx;
			text-align: center;
		}

		.title {
			width: 100%;
			height: 52rpx;
			font-size: 36rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #110202;
			line-height: 52rpx;
			text-align: center;
			margin-top: 16rpx;
		}

		.c1 {
			height: 28rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #7D8592;
			line-height: 28rpx;
			margin-top: 56rpx;
		}

		.c2 {
			width: 566rpx;
			height: 100rpx;
			margin-top: 40rpx;

			/deep/ .u-input {
				height: 98rpx;
				border-radius: 28rpx;
			}
		}
	}


	.but {
		margin-top: 60rpx;
		width: 290rpx;
		height: 96rpx;
		background: #7677EB;
		box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
		border-radius: 28rpx;
		margin: 60rpx auto 0 auto;
		text-align: center;

		text {
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 96rpx;
		}
	}
</style>